<script setup>
	// 1.0 定义一个响应式数据
	import { reactive, ref } from 'vue'
	// https://shenling-admin.botue.com/index.html 请大家使用这个网址自行注册一个自己的登录账号

	import userApi from '@/apis/user.js'
	import { useUserStore } from '@/stores/user'
	// 表单元素的 ref 属性
	const accountForm = ref()

	const formData = reactive({
		account: 'tjmvi123', //用户名
		password: '123456', //密码
	})

	// 2. 定义uni-forms中的元素验证规则
	const accountRules = reactive({
		account: {
			rules: [
				{ required: true, errorMessage: '请输入登录账号' },
				{ pattern: '^[a-zA-Z0-9]{6,8}$', errorMessage: '登录账号格式不正确' },
			],
		},
		password: {
			rules: [
				{ required: true, errorMessage: '请输入登录密码' },
				{ pattern: '^\\d{6}$', errorMessage: '登录密码格式不正确' },
			],
		},
	})

	// 定义表达触发函数
	async function onFormSubmit() {
		// uni.utils.toast('表单触发')
		// 触发表单验证规则
		try {
			// 如果表单验证不合法，则直接报错到catch里面去执行，否则正常执行
			// accountInfo返回的就是用户输入的用户名和密码
			let accountInfo = await accountForm.value.validate() //返回的是一个Promise

			// TODO：将用户名和密码通过请求服务器接口完成登录工作
			// 1. 请求服务器接口 post 请求
			/*
			{
				code:逻辑状态码，200表示正常数据，非200就是异常
				msg:后端提示回来的信息
				data:就是每个接口响应的正常业务数据
			}
			*/
			let { code, data } = await userApi.login(accountInfo)

			if (code !== 200) return uni.utils.toast('登录失败，请重试！')

			let token = data
			// 2. 将 token 保存到 pinia 中
			const userStore = useUserStore()
			userStore.token = token // 持久化到了磁盘
			// 3. 跳转到任务的首页 /pages/task/index
			uni.switchTab({
				url: '/pages/task/index',
			})
		} catch (e) {}
	}
</script>
<template>
	<uni-forms
		class="login-form"
		ref="accountForm"
		:model="formData"
		:rules="accountRules"
	>
		<uni-forms-item name="account">
			<input
				type="text"
				placeholder="请输入账号"
				v-model="formData.account"
				class="uni-input-input"
				placeholder-style="color: #818181"
			/>
		</uni-forms-item>
		<uni-forms-item name="password">
			<input
				type="text"
				placeholder="请输入密码"
				v-model="formData.password"
				class="uni-input-input"
				placeholder-style="color: #818181"
			/>
		</uni-forms-item>
		<button class="submit-button" @click="onFormSubmit">登录</button>
	</uni-forms>
</template>
<style lang="scss" scoped>
	@import './styles.scss';
</style>
